<template>
  <div v-cloak>
    <!-- 主体 -->
    <div style="position: relative">
      <!-- 主体开始 -->
      <div>
        <!-- 表格主体-->
        <div style="margin-top: 10px; padding: 0 10px">
          <div>
            <div style="padding: 10px; border-radius: 10px 10px 0 0; color: #000; background-color: #ddd;">个人信息</div>
            <div style="background-color: #fff; border: 1px solid #ccc; padding: 10px">
              <div class="row">
                <div class="col-md-12">
                  <form class="form-horizontal">
                    <input type="hidden" v-model="entity.id">
                    <div class="form-group">
                      <label class="col-sm-3 control-label">姓名</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control" v-model="entity.name" placeholder="请输入姓名" id="name">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">昵称</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control" v-model="entity.nickName" placeholder="请输入昵称" id="nickName">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">性别</label>
                      <div class="col-sm-7">
                        <label class="radio-inline">
                          <input type="radio" value="男" v-model="entity.sex" id="sex">男
                        </label>
                        <label class="radio-inline">
                          <input type="radio" value="女" v-model="entity.sex" id="sex">女
                        </label>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">年龄</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control" v-model="entity.age" placeholder="请输入年龄" id="age">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">手机号</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control" v-model="entity.phone" placeholder="请输入手机号" id="phone">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">邮箱</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control" v-model="entity.email" placeholder="请输入邮箱" id="email">
                      </div>
                    </div>
                  </form>
                  <div style="text-align: center">
                    <button type="button" class="btn btn-primary" @click="update">保存</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 表格主体结束-->
      </div>
      <!-- 主体结束 -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from "@/utils/request.js";

// 响应式数据
const user = ref(JSON.parse(localStorage.getItem('user')))
const authority = ref([])
const entity = reactive({
  sex: '男',
  id: '',
  name: '',
  nickName: '',
  age: '',
  phone: '',
  email: ''
})

// 生命周期钩子
onMounted(() => {
  loadData()
  fetchAuthority()
})

// 方法
const loadData = async () => {
  try {
    const res = await request.get("/getAccountInfo")
    if (res.data.code === '0') {
      Object.assign(entity, res.data.data)
    } else {
      ElMessage.error(res.data.msg)
    }
  } catch (error) {
    ElMessage.error('数据加载失败')
  }
}

const fetchAuthority = async () => {
  try {
    const res = await request.get("/authority")
    if (res.data.code === '0') {
      authority.value = res.data.data
    } else {
      ElMessage.error(res.data.msg)
    }
  } catch (error) {
    ElMessage.error('权限获取失败')
  }
}

const update = async () => {
  if (!checkValid(entity)) return

  try {
    const res = await request.put("/adminInfo", entity)
    if (res.data.code === '0') {
      ElMessage.success('更新成功')
      loadData()
    } else {
      ElMessage.error(res.data.msg)
    }
  } catch (error) {
    ElMessage.error('更新失败')
  }
}

const logout = () => {
  // 实现退出逻辑
  localStorage.removeItem('user')
  window.location.href = '/login'
}

const personalPage = () => {
  // 实现个人页面跳转逻辑
}

// 表单验证函数（需要根据实际需求实现）
const checkValid = (data) => {
  // 示例验证逻辑
  if (!data.name.trim()) {
    ElMessage.warning('请输入姓名')
    return false
  }
  return true
}
</script>

<style scoped>
@import url('../css/bootstrap.min.css');
[v-cloak] { display: none; }
/* 添加其他自定义样式 */
</style>